<template>
  <!-- 访问日志 -->
  <div id="my-log">
    <!-- 面包屑 -->
    <div class="div-breadcrumb">
      <el-card>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>访问日志</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <!-- 搜索表单 -->
    <div class="center-query-form">
      <el-card>
        <el-row>
          <el-col :span="24">
            <el-form :inline="true" :model="queryForm" class="query-form-inline" size="mini">
              <el-form-item label="IP">
                <el-input v-model="queryForm.ip" placeholder="IP"></el-input>
              </el-form-item>
              <el-form-item label="URL">
                <el-input v-model="queryForm.url" placeholder="URL"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit()">查询</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <!-- 表格 -->
    <div class="center-table">
      <el-card>
        <el-row>
          <el-col :span="24">
            <el-table :data="tableData" stripe border size="mini" class="tag-table">
              <el-table-column label="编号" align="center" width="80" fixed="left">
                <template slot-scope="scop">
                  {{ scop.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column prop="id" label="日志id" width="80" align="center" v-if="false">
              </el-table-column>
              <el-table-column prop="ip" label="访问ip" width="250" align="center">
              </el-table-column>
              <el-table-column prop="url" label="访问url" width="250" align="center">
              </el-table-column>
              <el-table-column prop="version" label="版本" width="100" align="center" v-if="false">
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" width="250" align="center" sortable>
              </el-table-column>
              <el-table-column prop="updateTime" label="修改时间" width="250" align="center">
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" icon="el-icon-info" circle>
                    <!-- @click="edit(scope.$index, scope.row)" -->
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <!-- 分页插件 -->
    <div class="center-pagination">
      <el-card>
        <el-row>
          <el-col :span="24">
            <el-pagination background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                           @current-change="handleCurrentChange" :current-page="pagination.current"
                           :page-sizes="[10, 20, 50, 100]"
                           :page-size="pagination.size" :total="pagination.total">
            </el-pagination>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>

</template>
<script>
import {
    logPageList
} from '@/api/system'
import {
    Message
} from 'element-ui'

export default {
    name: 'my-tag',
    data () {
        return {
            queryForm: {
                ip: null,
                url: null,
                current: 1,
                size: 10
            },
            tableData: [],
            pagination: {
                current: 1,
                size: 10,
                total: 0
            }
        }
    },
    methods: {
    // 查询
        onSubmit () {
            let params = {
                ip: this.queryForm.ip,
                url: this.queryForm.url,
                current: this.queryForm.current,
                size: this.queryForm.size
            }
            logPageList(params).then((response) => {
                if (response && response.code === 200) {
                    this.tableData = response.data.list
                    this.pagination.total = response.data.total
                    this.pagination.current = response.data.current
                    this.pagination.size = response.data.size
                } else {
                    if (response && response.code === 10009) {
                        Message.error({
                            message: response.message
                        })
                        this.$router.push('/')
                    }
                }
            })
        },

        // 切换每页条数
        handleSizeChange (size) {
            let params = {
                ip: this.queryForm.ip,
                url: this.queryForm.url,
                current: this.queryForm.current,
                size: size
            }
            logPageList(params).then((response) => {
                this.tableData = response.data.list
                this.pagination.total = response.data.total
                this.pagination.current = response.data.current
                this.pagination.size = response.data.size
            })

            this.queryForm.size = size
        },

        // 切换页码
        handleCurrentChange (current) {
            let params = {
                ip: this.queryForm.ip,
                url: this.queryForm.url,
                current: current,
                size: this.queryForm.size

            }
            logPageList(params).then((response) => {
                this.tableData = response.data.list
                this.pagination.total = response.data.total
                this.pagination.current = response.data.current
                this.pagination.size = response.data.size
            })

            this.queryForm.current = current
        }
    },
    mounted () {
        let params = {
            ip: this.queryForm.ip,
            url: this.queryForm.url,
            current: this.queryForm.current,
            size: this.queryForm.size
        }
        logPageList(params).then((response) => {
            this.tableData = response.data.list
            this.pagination.total = response.data.total
            this.pagination.current = response.data.current
            this.pagination.size = response.data.size
        })
    }
}
</script>

<style scoped>
#my-log {
  width: 100%;
  height: auto;
}

.div-breadcrumb {
  margin: 20px 30px 0px 30px;
}

.bg-purple {
  background: #d3dce6;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

/* 搜索表单 */
.center-query-form {
  margin: 0px 30px 0px 30px;
}

/* 表格 */
.center-table {
  margin: 0px 30px 0px 30px;
}

.tag-table {
  width: 100%;
}

/* 分页 */
.center-pagination {
  margin: 0px 30px 20px 30px;
  text-align: center;
}
</style>
